<template>
  <el-form  ref="routerForm" size="large" :rules="rules" :model="form">
        <el-form-item label="路由路径" prop="routerPath">
          <el-input  v-model="form.routerPath"></el-input>
        </el-form-item>
        <el-form-item label="路径组件" prop="routerComponent">
          <el-input  v-model="form.routerComponent"></el-input>
        </el-form-item>
        <el-form-item label="路由名" prop="routerName">
          <el-input  v-model="form.routerName"></el-input>
        </el-form-item>
        <el-form-item label="父路由" prop="router">
          <el-select v-model="form.router">
            <el-option v-for="item in routers"
                       :label="item.routerName"
                       :key="item.routerNo"
                       :value="item.routerNo"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="路由图标" >

        </el-form-item>
    <FormUpload ref="ffile" @batchImport="upIcon"></FormUpload>
        <el-form-item label="路由类型">
          <el-select v-model="form.routerType">
            <el-option label="项" :key="0" :value="0"></el-option>
            <el-option label="菜单" :key="1" :value="1"></el-option>
          </el-select>
        </el-form-item>

    <el-row  justify="center">
      <el-col :span="3"><el-button type="primary" @click="submitForm($refs.routerForm)">保存</el-button></el-col>
      <el-col :span="3"><el-button @click="closeForm">关闭</el-button></el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import {onMounted, onServerPrefetch, onUpdated, reactive, ref} from "vue";
import {addRouter, editRouter, getAllRouter} from '../../../request/system/RouterApi.js'
import {ElMessage, ElNotification} from "element-plus";
import axios from "axios";
import Upload from "../../upload.vue";
import FormUpload from "../../FormUpload.vue";
const insert=ref(true)
const form =reactive({
        routerNo:'',
        routerPath:'',
        routerComponent:'',
        routerName:'',
        router:'',
        routerIcon:'',
        routerType:0,
        file:''
})
const upIcon=(files)=>{
  form.file=files[0]
}
const rest=(isInsert)=>{
  ffile.value.rest()

  insert.value=isInsert
    routerForm.value.resetFields()
}
const ffile=ref()
const routerForm=ref()
const fillForm=(row)=>{
  rest(false)
    form.routerNo= row.routerNo
    form.routerPath= row.routerPath
    form.routerComponent= row.routerComponent
    form.routerName= row.routerName
  form.router= row.router
  form.routerIcon= row.routerIcon
  form.routerType= row.routerType

}

const emits = defineEmits(['closeRouterForm','submitRouterForm']);
const closeForm=()=>{
    emits("closeRouterForm")
}
const rules=reactive({
        routerPath:[
          {
            required: true,message:"路由路径不能为空",trigger:'blur'
          }
        ]
          ,
        routerComponent:[
          {
            required: true,message:"路径组件不能为空",trigger:'blur'
          }
        ],
        routerName:[
          {
            required: true,message:"路由名不能为空",trigger:'blur'
          }
        ]
          ,
})

const submitForm = async (formEl) => {
  if (!formEl) return

  await formEl.validate((valid, fields) => {
    if (valid) {
      if(insert.value){
        addRouter(form).then((response)=>{
          if(response.state=="200"){
            ElMessage.success("新增成功")
            emits("submitRouterForm")
          }
        })
      }else {
        editRouter(form).then((response)=>{
          if(response.state=="200"){
            ElMessage.success("修改成功")
            emits("submitRouterForm")
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
const routers=ref([])
defineExpose({ rest,fillForm })
onMounted(()=>{
getAllRouter(1,1000).then((response)=>{

  routers.value=response.data
})

})
</script>
<style scoped>

</style>
